<template>
    <app-search>
        <el-form :model="emp" :rules="rules" :label-position="$store.labelPosition"
                 label-width="30%" ref="emp">
            <el-row >
                <el-col :xs="24" :sm="16">
                    <el-form-item label="用户名：" prop="userId">
                        <el-input v-model="emp.userId" placeholder="请输入用户名(姓名全拼)"
                                  :disabled="!canEditUserId"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row >
                <el-col :xs="24" :sm="16">
                    <el-form-item label="姓名：" prop="empName">
                        <el-input v-model="emp.empName" placeholder="请输入姓名"
                                  :disabled="isViewEmp"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row >
                <el-col :xs="24" :sm="16">
                    <el-form-item label="部门：" prop="deptName">
                        <el-input  v-model="emp.deptName" disabled>
                            <el-popover slot="append" placement="right"
                                        width="400" trigger="click">
                                <el-tree :data="deptTreeData" :props="defaultProps" highlight-current
                                         @node-click="selectDept"></el-tree>
                                <el-button slot="reference">选择部门</el-button>
                            </el-popover>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row >
                <el-col :xs="24" :sm="16">
                    <el-form-item label="进入部门日期：" prop="changeDt">
                        <el-date-picker type="date" placeholder="进入部门日期" v-model="emp.changeDt"
                                        :disabled="isViewEmp" value-format="yyyy-MM-dd"
                                        format="yyyy-MM-dd" >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row >
                <el-col :xs="24" :sm="16">
                    <el-form-item label="性别：" prop="sex">
                        <el-radio-group v-model="emp.sex" :disabled="isViewEmp" >
                            <el-radio :label="sex.code" v-for="sex in sexList">{{sex.description}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row >
                <el-col :xs="24" :sm="16">
                    <el-form-item label="身份证：" prop="idCardNo">
                        <el-input v-model="emp.idCardNo" placeholder="请输入身份证"
                                  :disabled="isViewEmp">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!--<el-row >
                <el-col :xs="24" :sm="16">
                    <el-form-item label="出生日期：" prop="birth">
                        <el-date-picker v-model="emp.birth" type="date"
                                        :disabled="isViewEmp"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>-->

            <el-row >
                <el-col :xs="24" :sm="16">
                    <el-form-item label="社保编号：" prop="sheBao">
                        <el-input v-model="emp.sheBao" placeholder="请输入社保编号" :disabled="isViewEmp">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row >
                <el-col :xs="24" :sm="16">
                    <el-form-item label="离职日期：">
                        <el-date-picker type="date" placeholder="离职日期" v-model="emp.leaveDt"
                                        :disabled="isViewEmp" value-format="yyyy-MM-dd"
                                        format="yyyy-MM-dd" >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row >
                <el-col :xs="24" :sm="16" >
                    <el-form-item >
                        <el-button type="edit" icon="fa fa-save" @click="saveEmp()"
                                   v-if="!isViewEmp">保存</el-button>
                        <el-button type="primary" @click="hideEditSection()">取 消</el-button>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

    <!--<el-row>
    <el-col :sm="8" :xs="22">
        <el-dialog :visible.sync="deptDialogShown" center close-on-press-escape>
            <el-tree :data="deptTreeData" :props="defaultProps" highlight-current
                     @node-click="selectDept"></el-tree>
        </el-dialog>
    </el-col>
    </el-row>-->
    </app-search>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
    name: "EmpEdit",
    data() {
        return {
            emp:{},
            deptDialogShown: false,
            selectedDept: "",
            rules:{
                userId:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
                empName:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
                deptName:[{ required: true, message: '请选择部门', trigger: 'blur' }],
                changeDt:[{ required: true, message: '请选择进入部门日期', trigger: 'blur' }]
            }
        }
    },

    mounted() {
        this.initEmp();
    },

    computed: {
        ...mapState({
            empId: state => state.emp.empId,
            isViewEmp: state => state.emp.isViewEmp,
            sexList: state => state.emp.sexList,
            deptTreeData: state => state.dept.deptTreeData,
            defaultProps: state => state.dept.defaultProps,
            canEditUserId: state => state.emp.canEditUserId
        }),
    },

    methods: {
        initEmp(){
            if(this.empId === -1){
                this.emp = {
                    id: -1,
                    userId: "",
                    empName: "",
                    deptId: -1,
                    changeDt: null,
                    sex: "",
                    idCardNo: "",
                    sheBao: "",
                    leaveDt: null,
                    deptName: ""
                }
            }else{
                this.$axios.get(`/hr/emp/${this.empId}` ).then(res => {
                    console.log("res", res);
                    this.emp = res.result;
                })
            }
        },

        saveEmp(){
            this.$refs['emp'].validate((valid) => {
                console.log("表单验证：", valid);
                if (valid) {
                    if(this.emp.id  === -1 ){
                        this.addEmp(this.emp);
                    }else{
                        this.editEmp(this.emp);
                    }
                    this.hideEditSection();

                } else {
                    console.log('保存员工验证不通过');
                    return false;
                }
            });
        },

        hideEditSection(){ // 关闭弹出窗口
            this.$store.commit("emp/Hide_Edit_Emp_Section");
        },

        /*showDeptDialog(){
            this.deptDialogShown = true;
        },*/

        selectDept(node){
            this.emp.deptId = node.id;
            this.emp.deptName = node.name;
        },

        /*changeIdCardNo(){
            let idCard = this.emp.idCardNo;
            if(idCard.length >=14){
                var year = idCard.substring(6, 10);
                var month = idCard.substring(10, 12);
                var day = idCard.substring(12, 14);

                this.$store.commit("emp/Update_Birth", year + "-" + month + "-" + day)
            }
        },*/

        ...mapActions({
            addEmp: 'emp/addEmp',
            editEmp: 'emp/editEmp',
        }),
    }
}
</script>

